<template>
  <div
    class="custom_video"
    :style="{ paddingBottom: ($isMPWeiXin ? 100 : 60) / 23.44 + 'rem' }"
  >
    <Navbar></Navbar>
    <div class="custom_video_content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div
          class="custom_video_content_item"
          v-for="(item, index) in contentList"
          :key="'list_index_' + index"
        >
          <Groups :item="item" :index="index" v-if="item"></Groups>
        </div>
      </van-pull-refresh>
    </div>
    <Tabbar :item="tabbarItems"></Tabbar>
    <Gotop></Gotop>
    <FloatDownloadButton
      :item="{
        data: { direction: 'bottom', info: $t('lang.APP中打开'), url: 'url' },
      }"
    ></FloatDownloadButton>
  </div>
</template>
<script>
export default {
  name: "videoChannel",
  components: {
    Groups: () =>
      import(/* webpackChunkName:'groups' */ "../components/groups/groups"),
    Navbar: () =>
      import(
        /* webpackChunkName:'navbarPublic' */ "../components/navbar/navbarPublic"
      ),
    Tabbar: () =>
      import(/* webpackChunkName:'tabbar' */ "../components/tabbar/tabbar"),
    Gotop: () =>
      import(/* webpackChunkName:'gotop' */ "../components/gotop/gotop"),
    FloatDownloadButton: () =>
      import(
        /* webpackChunkName:'floatDownloadButton' */ "../components/button/floatDownloadButton"
      ),
  },
  data() {
    return {
      tabbarItems: {},
      isLoading: false,
      contentList: [],
    };
  },
  created() {
    this.$on("downloadClickHandle", this.downloadClickHandle);
    this.$on("goBackClickHandle", this.goBackClickHandle);
    this.getChannelData();
  },
  mounted() {
    window.scrollTo(1, 1);
  },
  methods: {
    onRefresh() {
      this.isLoading = false;
    },
    downloadClickHandle(v) {
      console.log(v);
    },
    getChannelData() {
      const that = this;
      that.$store.dispatch("getStateChannelData").then((v) => {
        that.tabbarItems = v;
        that.getPageItemsData();
      });
    },
    getPageItemsData() {
      const that = this;
      that.$store
        .dispatch("getStatePageVideoItemsData", that.$route.name)
        .then((v) => {
          console.log(v);
          that.contentList = v;
          that.$NProgress.done();
        });
    },
    goBackClickHandle() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_video {
  padding: 0 0 (60 / @base) 0;
  background-color: #fff;
  .custom_video_content {
    margin: (46 / @base) 0 0;
    padding: 0 0 (40 / @base) 0;
    .custom_video_content_item {
    }
  }
}
</style>
